<template>
    <div class="common-layout">
        <el-container class="h-100%">
            <el-main class="main-container">
                <el-row class="main-echart">
                    <div ref="myEchartsRef" style="height: 100%; width: 100%;" @mouseenter="clearTooltipCarousel"
                        @mouseleave="startTooltipCarousel"></div>
                </el-row>
                <el-row class="main-agc">
                    <el-col :span="3" class="main-agc-name">
                        {{ chartDataName[0] }}
                    </el-col>
                    <el-col :span="20" class="main-agc-data">
                        <el-row :gutter="2" class="h-100%">
                            <div :key="index" v-for="(item, index) in chartData" class="main-agc-input">
                                <el-input :value="item.data1" readonly />
                            </div>
                        </el-row>
                    </el-col>
                </el-row>
            </el-main>
        </el-container>
    </div>
</template>

<script setup lang='ts'>
import { ref, onMounted, watch, onUnmounted } from 'vue'
import * as echarts from "echarts";

export type ChartDataType = {
    name: string,
    data1: number,
    data2: number,
}
interface Props {
    chartDataName: string[],
    chartData?: Partial<ChartDataType>[] | undefined,
    tooltipMove?: boolean,
    setValueArr: Array<any>,
}

const props: Props = withDefaults(defineProps<Props>(), {
    chartDataName: () => ['实际值', '设定值'],
    chartData: () => {
        return [
            {
                name: '#1',
                data1: 0,
                data2: 0
            },
            {
                name: '#2',
                data1: 0,
                data2: 0
            },
            {
                name: '#3',
                data1: 0,
                data2: 0
            },
            {
                name: '#4',
                data1: 0,
                data2: 0
            },
            {
                name: '#5',
                data1: 0,
                data2: 0
            }
        ]
    },
    tooltipMove: false,
    setValueArr: () => [],
});

const myEchartsRef = ref<HTMLElement>();
let myEcharts: echarts.ECharts

const currentIndex = ref(0);

let tooltipCarouselTimer: number | null = null;
const startTooltipCarousel = () => {
    if (props.tooltipMove === true) {
        tooltipCarouselTimer = setInterval(() => {
            if (currentIndex.value === (props.chartData?.length ?? 0) - 1) {
                currentIndex.value = 0;
            } else {
                currentIndex.value++;
            }
            myEcharts.dispatchAction({
                type: 'showTip',
                seriesIndex: 0,
                dataIndex: currentIndex.value
            });
        }, 2000)
    }

}

const clearTooltipCarousel = () => {
    if (tooltipCarouselTimer) {
        clearInterval(tooltipCarouselTimer);
        tooltipCarouselTimer = null;
    }
}

onMounted(() => {
    myEcharts = echarts.init(myEchartsRef.value!);
    let option = setOption();

    myEcharts.setOption(option);

    watch(() => props.chartData, () => {
        option = setOption()
        myEcharts.setOption(option)
    })

    startTooltipCarousel();

})

onUnmounted(() => {
    if (myEcharts) {
        myEcharts.dispose()
    }

    if (tooltipCarouselTimer) {
        clearInterval(tooltipCarouselTimer);
        tooltipCarouselTimer = null;
    }
})



const alarmColor = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
    {
        offset: 0,
        color: "#FC6968"
    },
    {
        offset: 1,
        color: "#F00"
    }
])
const warningColor = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
    {
        offset: 0,
        color: "#ffcc99"
    },
    {
        offset: 1,
        color: "#ff9933"
    }
])
const normalColor = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
    { offset: 0, color: '#03deff' },
    { offset: 0.5, color: '#0295c1' },
    { offset: 1, color: '#016797' }
])


const setOption = () => {
    const nameData = props.chartData?.map(item => item.name);
    const data1 = props.chartData?.map(item => {
        if (Math.abs(item.data1 as number) > 10) {
            return {
                value: item.data1,
                itemStyle: {
                    color: alarmColor
                }
            }
        }
        return item.data1

    });
    const data2 = []
    for (let index = 0; index < props.setValueArr.length; index++) {
        const element = props.setValueArr[index];
        const item = props.chartData[index]
        const obj = {
            value: item?.data2,
            itemStyle: {
                color: normalColor
            }
        }
        if (Math.abs(item?.data2 ) / element >= 0.6)  obj.itemStyle.color = warningColor
        if (Math.abs(item?.data2 ) / element >= 0.8)  obj.itemStyle.color = alarmColor
        data2.push(obj)
    }

    let option = {
        legend: {
            data: props.chartDataName,
            align: 'right',
            textStyle: {
                color: '#fff'
            }
        },
        grid: {
            left: '5%',
            right: '4%',
            bottom: '18%',
            top: '13%',
        },
        xAxis: {
            type: 'category',
            data: nameData,
            axisLabel: {
                show: true,
                color: '#fff'
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            },
            z: 10
        },
        yAxis: {
            boundaryGap: ['20%', '20%'],
            axisLine: {
                show: true,
            },
            axisTick: {
                show: true
            },
            axisLabel: {
                color: '#fff'
            },
            splitLine: {
                show: false,
                lineStyle: {
                    type: 'dashed',
                    color: '#ccc',

                }
            }
        },
        series: [
            {
                name: props.chartDataName[0],
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                    color: 'rgb(34,73,148)',
                    opacity: 0.8,
                    borderRadius: [5, 5, 0, 0]
                },
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#b773ff' },
                        { offset: 0.5, color: '#9d40fc' },
                        { offset: 1, color: '#7025be' }
                    ]),
                    barBorderRadius: [5, 5, 5, 5],
                },
                emphasis: {
                    tooltip: {
                        show: true
                    },
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: '#b773ff' },
                            { offset: 0.7, color: '#9d40fc' },
                            { offset: 1, color: '#7025be' }
                        ]),
                        barBorderRadius: [5, 5, 0, 0],
                        opacity: 1
                    },
                },
                // barWidth: 15,
                data: data1
            },
            {
                name: props.chartDataName[1],
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                    color: 'rgb(34,73,148)',
                    opacity: 0.8,
                    borderRadius: [5, 5, 0, 0]
                },
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#03deff' },
                        { offset: 0.5, color: '#0295c1' },
                        { offset: 1, color: '#016797' }
                    ]),
                    barBorderRadius: [5, 5, 5, 5],
                },
                emphasis: {
                    tooltip: {
                        show: true
                    },
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: '#016797' },
                            { offset: 0.5, color: '#0295c1' },
                            { offset: 1, color: '#03deff' }
                        ]),
                        barBorderRadius: [5, 5, 0, 0],
                        opacity: 1
                    }
                },
                // barWidth: 15,
                data: data2
            }
        ],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow', // 坐标轴指示器类型为线型
            },
            confine: true,
            backgroundColor: 'rgba(50, 50, 50, 0.7)',
            textStyle: {
                color: '#fff'
            },
            borderColor: 'transparent'
        }
    };
    return option;
}

</script>

<style scoped lang="less">
.common-layout {
    height: 100%;
    padding: 0 4px;

    .main-container {
        height: 100%;
        border: 1px solid #043e91;
        border-radius: 5px;

        .main-echart {
            height: 100%;
            width: 38vw;
        }

        .main-agc {
            display: none;
            height: 15%;

            .main-agc-name {
                height: 100%;
                color: #fff;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 13px;
                font-weight: 700;
            }

            .main-agc-data {
                height: 100%;
                display: flex;
                justify-content: space-between;
            }

            .main-agc-input {
                height: 100%;
                padding: 0;
                flex: 1;
                margin-right: 2px;
            }
        }
    }


}
</style>

<style scoped>
:deep(.el-header) {
    --el-header-padding: 0;
    padding: var(--el-header-padding);
    box-sizing: border-box;
    flex-shrink: 0;
}

:deep(.el-main) {
    --el-main-padding: 0;
    display: block;
    flex: 1;
    flex-basis: auto;
    overflow: auto;
    box-sizing: border-box;
    padding: var(--el-main-padding);
}

:deep(.el-row) {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    box-sizing: border-box;
    padding: 1px 0 0 0;
}

:deep(.el-input) {
    --el-input-height: var(--el-component-size);
    position: relative;
    font-size: var(--el-font-size-base);
    display: inline-flex;
    width: var(--el-input-width);
    line-height: 100%;
    height: 100%;
    box-sizing: border-box;
    vertical-align: top;
}

:deep(.main-agc .el-input__wrapper) {
    display: inline-flex;
    flex-grow: 1;
    align-items: center;
    justify-content: center;
    padding: 0;
    background-color: #00c8e6;
    background-image: none;
    border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
    cursor: text;
    transition: var(--el-transition-box-shadow);
    transform: translateZ(0);
    box-shadow: none;
}

:deep(.el-input__inner) {
    --el-input-inner-height: 100%;
    width: 100%;
    flex-grow: 1;
    /* -webkit-appearance: none; */
    color: #000000;
    font-size: inherit;
    font-weight: 700;
    text-align: center;
    height: var(--el-input-inner-height);
    line-height: var(--el-input-inner-height);
    padding: 0;
    outline: 0;
    border: none;
    background: 0 0;
    box-sizing: border-box;
}
</style>, pushScopeId, pushScopeId